import React from 'react';
import classNames from 'classnames';
import { sizeCaculator } from './utils';
import FileProgress from './materiels/FileProgress';
import FileSpeed from './materiels/FileSpeed';
import FileActions from './materiels/FileActions';
import FileOverlay from './materiels/FileOverlay';
import FileName from './materiels/FileName';
import FileThumb from './materiels/FileThumb';

function Item(props) {
    const {
        listType,
        file,
        className,
        breakpoint,
        onPause,
        onContinue,
        onRemove,
        onPreview,
        onDownload,
        ifShowCardName = false,
        ifShowDownload = true,
        ifShowPreview = true,
        ifShowRemove = true
    } = props;

    return (
        <div
            data-state={file.state}
            title={`${file.name}(${sizeCaculator(file.size)})`}
            className={classNames([
                'file-list-item',
                `file-list-item--${listType}`,
                `file-list-item--${file.state}`,
                className
            ])}
        >
            <FileThumb
                listType={listType}
                file={file}
                breakpoint={breakpoint}
                href={file.url}
                onContinue={onContinue}
                onPause={onPause}
                onPreview={onPreview}
            />

            <FileName
                listType={listType}
                file={file}
                ifShowCardName={ifShowCardName}
                onPreview={onPreview}
            />

            <FileOverlay ifShow={listType === 'card'} className="file-overlay--card" />

            <FileProgress listType={listType} file={file} />

            <FileSpeed
                listType={listType}
                file={file}
                formatText={(listType, file) => {
                    let speed = '';
                    if (listType !== 'card') {
                        speed += `${sizeCaculator(file.loaded)} of ${sizeCaculator(file.size)} - `;
                    }
                    speed += `${sizeCaculator(file.speed)}/s`;

                    return speed;
                }}
            />

            <FileActions
                listType={listType}
                file={file}
                breakpoint={breakpoint}
                onPause={onPause}
                onContinue={onContinue}
                onRemove={onRemove}
                onPreview={onPreview}
                onDownload={onDownload}
                ifShowDownload={ifShowDownload}
                ifShowPreview={ifShowPreview}
                ifShowRemove={ifShowRemove}
            />
        </div>
    );
}
export default function FileList(props) {
    const {
        listType,
        fileList = [],
        rtl,
        renderListItem,
        children,
        ...otherProps
    } = props;

    let list = fileList.map(file => {
        const { uid: key } = file;

        if (typeof renderListItem === 'function') {
            return renderListItem({key, listType, file, ...otherProps});
        }
        return (
            <Item
                key={key}
                listType={listType}
                file={file}
                {...otherProps}
            />
        );
    });
    if (rtl && listType === 'card') {
        list = list.reverse();
    }

    return (
        <div className={classNames([
            'file-list',
            `file-list--${listType}`
        ])}>
            {rtl ? children : list}
            {rtl ? list : children}
        </div>
    );
}
